<template>
  <section>
    <!--start  面包屑-->
    <div class="location">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{path:'/index'}">首页</el-breadcrumb-item>
        <el-breadcrumb-item>营销</el-breadcrumb-item>
        <el-breadcrumb-item>奖励明细</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!--end  面包屑-->
    <!--start content-->
    <div class="content" ref="content">
      <!--start 普通搜索-->
      <div class="public_th clearfix">
        <div class="public_th_left fl">
          <div class="slideBtn fl slideBtn1">
            <el-select v-model="rewardDetailsQb.accountListFromType" @change="changeType" placeholder="奖励类型">
              <el-option label="全部类型" value=""><span style="font-size:12px ;">全部类型</span></el-option>
              <el-option v-for="(item,index) in vue_accountListTypeArr" :label="item.ddlistName" :value="item.ddlistKey"></el-option>
            </el-select>
          </div>
          <div class="dateStyle">
            <el-date-picker type="daterange" v-model="rewardDetailsQb.createDateStr" @change="dateChange" placeholder="选择日期范围"></el-date-picker>
          </div>
          <div class="fl">
            <div class="search_input">
              <input @keydown.enter="generalSearch_ok" type="text" v-model="rewardDetailsQb.memberName" placeholder="请输入奖励对象" /><i @click="generalSearch_ok"></i>
            </div>
          </div>
        </div>
      </div>
      <!--end 普通搜索-->
      <!--start 表格-->
      <div class="table contentBodyCon content_table_list" :class="{beforeNone:agentAccountListSet.list.length!='0'}">
        <el-table
          ref="saleOrderPruleRows"
          :data="agentAccountListSet.list"
          style="width: 100%;z-index: 10;"
          :max-height="vue_tableHeight"
          @sort-change="vFun_sort">
          <el-table-column prop="accountListCode" label="奖励编号"></el-table-column>
          <el-table-column prop="accountListFromTypeStr" label="奖励类型"></el-table-column>
          <el-table-column sortable="custom" prop="memberName" label="奖励对象"></el-table-column>
          <el-table-column sortable="custom" prop="giftedMoney" label="奖励金额"></el-table-column>
          <el-table-column sortable="custom" prop="createDateStr" label="奖励时间"></el-table-column>
          <el-table-column prop="accountListRemark" label="备注"></el-table-column>
        </el-table>
      </div>
      <!--end 表格-->
      <div class="block fr">
        <el-pagination
          @size-change="page_onPageSizeChange"
          @current-change="page_onCurPageChange"
          :current-page="parseInt(agentAccountListSet.pageTools.pageNo)"
          :page-sizes="agentAccountListSet.pageTools.pageSizeOptions"
          :page-size="parseInt(agentAccountListSet.pageTools.pageSize)"
          :total="parseInt(agentAccountListSet.pageTools.recordCount)"
          layout="total, prev, pager, next, sizes,jumper">
        </el-pagination>
      </div>
    </div>
    <!--end content-->
  </section>
</template>

<script>
  export default {
    data() {
      return {
        vue_accountListTypeArr:[],    //奖励类型
        vue_tableHeight:500,  //表格高度
        //table数据
        agentAccountListSet: {
          "list":[],  //数据列表
          "pageTools":{},	//分页数据
          "sumInfo":{}, //汇总信息
        },
        /*--查询条件--*/
        rewardDetailsQb:{
          "accountListFromType":"",     //奖励类型
          "createDateStr":[],  //奖励时间
          "memberName":"",  //查询关键词
          "orderStr":"",
        },


        /* end 全局变量定义 */
      }
    },
    methods: {

      vFun_sort(type){
        if(type.order==='ascending'){
          this.rewardDetailsQb.orderStr=type.prop
        }else if(type.order==='descending'){
          this.rewardDetailsQb.orderStr=type.prop +' desc'
        }else{
          this.rewardDetailsQb.orderStr=''
        };
        this.queryByPage();
      },

      //查table数据
      queryByPage(){
        this.axios({
          method: 'post',
          url: "/v3/agent/accountLists/list",
          data:{
            "offset":(this.agentAccountListSet.pageTools.pageNo-1)*this.agentAccountListSet.pageTools.pageSize,
            "limit":this.agentAccountListSet.pageTools.pageSize,
            "memberName":this.rewardDetailsQb.memberName,
            "supStartDate":this.rewardDetailsQb.createDateStr[0],
            "supEndDate":this.rewardDetailsQb.createDateStr[1],
            "accountListFromType":this.rewardDetailsQb.accountListFromType,
            "orderStr":this.rewardDetailsQb.orderStr
          }
        }).then((res) => {
          this.agentAccountListSet.list = res.data.list;
          this.agentAccountListSet.pageTools = res.data.pageTools;
          this.agentAccountListSet.sumInfo = res.data.sumInfo;
          this.agentAccountListSet.pageTools.pageSizeOptions = JSON.parse(this.agentAccountListSet.pageTools.pageSizeOptions);
        }).catch((err)=>{
          this.Public.openError(this,err.response.data);
        });
      },

      //初始化下拉框
      queryInfo_type(){
        this.axios({
          method: 'post',
          url: "/v3/system/ddlists/00010000049/listAll",
          data:{}
        }).then((res) => {
            this.vue_accountListTypeArr = res.data.list;
        }).catch((err)=>{
          this.Public.openError(this,err.response.data);
        });
      },

      //搜索  奖励日期
      dateChange(){
        this.agentAccountListSet.pageTools.pageNo=1;
        this.queryByPage();
      },

      //搜索 奖励类型
      changeType(){
        this.agentAccountListSet.pageTools.pageNo=1;
        this.queryByPage();
      },

      //搜索 关键字
      generalSearch_ok(){
        this.agentAccountListSet.pageTools.pageNo=1;
        this.queryByPage();
      },

      //pageSize每页条数变化时的fn
      page_onPageSizeChange(val) {
        this.agentAccountListSet.pageTools.pageSize = val;
        this.queryByPage();
      },

      //pageNo当前页码变化时的fn
      page_onCurPageChange(val) {
        this.agentAccountListSet.pageTools.pageNo = val;
        this.queryByPage();
      },
    },

    created(){
      this.agentAccountListSet.pageTools = this.$store.state.page;
      //初始化列表数据
      this.queryByPage();
      this.queryInfo_type();
    },

    mounted() {
      //动态设置高度
      this.$refs.content.style.height = (document.documentElement.clientHeight - 124)+"px";
      this.vue_tableHeight = document.documentElement.clientHeight - 240;
    },

  }
</script>

<style scoped>
  /* start  面包屑 */
  .location {padding: 3px 0 15px 0;}
  /* end  面包屑 */
  /* start content */
  .content {position: relative;background: #fff;padding: 15px;overflow-y: auto;font-family: "微软雅黑";}
  /* start 普通搜索 */
  .dateStyle{float: left;margin-right: 20px;}
  .public_th {position: relative;min-width: 750px;z-index: 100;}
  .public_th_left span.search_openBtn {display: block;position: relative;height: 36px;margin-right: 10px;padding-right: 0px;line-height: 36px;color:#93a6b7;z-index: 100;cursor: pointer;}
  .slideBtn {line-height: 36px;margin-right: 26px;}
  .slideBtn>div>span{display: block;cursor: pointer;}
  .search_input input {display: block;float: left;width: 300px;height: 34px;font-size: 12px;border: 0;margin-left: 20px;}
  .search_input {float: left;width: 350px;border: 1px solid #cdd9e6;border-radius: 30px;margin-right: 10px;cursor: pointer;}
  .search_input:hover {border-color:#13C19F;transition: 1s;}
  .search_input i {background: url('../../../img/sousuo.png') no-repeat; height: 20px;width: 20px;display: inline-block;position: relative;top: 7px;right: 5px;cursor: pointer;}
  .public_th_right a {display: block;float: left;width: 80px;height: 32px;margin-left: 10px;box-sizing: border-box;text-decoration: none;text-align: center;line-height: 32px;border-radius: 30px;border: 1px solid #cdd9e6;cursor: pointer;}
  /* end 普通搜索 */
  /* start 表格 */
  .table {margin-top: 15px;}
  .table th {height: 50px;}
  .el-table th>.cell {width: 100%;word-wrap: normal;text-overflow: ellipsis;line-height: 20px;box-sizing: border-box;font-weight: normal !important;font-size: 14px;}
  .el-table {font-size: 12px !important;font-weight: normal !important;}
  /* end 表格 */
  /* start page */
  .block {margin: 15px;}
  /* end page */
  /* end content */
  /* start transition */
  .fade-enter,.fade-leave-active {opacity: 0}
  .fade-enter-active,.fade-leave-active {transition: .4s;}
  /* end transition */
</style>
